<template>
<!-- template里面有且仅有一个div，相当于body -->
  <div>
    <div class="father">
      <span>我父亲的年龄是: {{fatherAge}}岁</span>
      <div class="son">{{sonAge > 30 ? '事业有成' : '年少有为'}}</div>
    </div>
    <div class="box">{{test.uname}}</div>
    <div class="box">{{test.age*2}}</div>
  </div>

 
</template>
 
<script>

export default {
// data必须写成函数得形式，而且也要return 一个对象
  data() {
    return {
      fatherAge: 50,
      sonAge:24,
      test: {
        uname:'张三',
        age:19,
      }
    };
  },

};
</script>

<style lang='less'>
     .father {
      color:#087;
      .son {
        color:red;
      }
     }
     .box {
      color:green;
     }
</style>
